<template>
  <div class="user-page">
    <div class="user-container">
      <!-- 用户信息头部 -->
      <div class="user-header">
        <div class="avatar-section">
          <div class="avatar">
            <van-icon name="user-circle" size="80" color="#fff" />
          </div>
          <div class="user-info">
            <h2>{{ userInfo.nickname }}</h2>
            <p>{{ userInfo.phone }}</p>
          </div>
        </div>
      </div>
      
      <!-- 功能菜单 -->
      <div class="menu-section">
        <!-- 订单相关 -->
        <div class="menu-card">
          <div class="menu-header">
            <h3>我的订单</h3>
            <div class="view-all" @click="goToOrderList">
              <span>查看全部</span>
              <van-icon name="arrow-right" size="16" />
            </div>
          </div>
          <div class="order-types">
            <div class="order-type" @click="goToOrderList">
              <van-icon name="pending-o" size="30" color="#ff976a" />
              <span>待支付</span>
            </div>
            <div class="order-type" @click="goToOrderList">
              <van-icon name="success-o" size="30" color="#67c23a" />
              <span>已支付</span>
            </div>
            <div class="order-type" @click="goToOrderList">
              <van-icon name="refresh" size="30" color="#1989fa" />
              <span>已完成</span>
            </div>
            <div class="order-type" @click="goToOrderList">
              <van-icon name="close" size="30" color="#909399" />
              <span>已取消</span>
            </div>
          </div>
        </div>
        
        <!-- 个人设置 -->
        <div class="menu-card">
          <div class="menu-item" @click="changePassword">
            <div class="menu-left">
              <van-icon name="safe-o" size="20" color="#1989fa" />
              <span>修改密码</span>
            </div>
            <van-icon name="arrow-right" size="16" color="#c0c4cc" />
          </div>
          <div class="menu-item">
            <div class="menu-left">
              <van-icon name="service-o" size="20" color="#1989fa" />
              <span>帮助中心</span>
            </div>
            <van-icon name="arrow-right" size="16" color="#c0c4cc" />
          </div>
          <div class="menu-item">
            <div class="menu-left">
              <van-icon name="info-o" size="20" color="#1989fa" />
              <span>关于我们</span>
            </div>
            <van-icon name="arrow-right" size="16" color="#c0c4cc" />
          </div>
        </div>
      </div>
      
      <!-- 退出登录按钮 -->
      <van-button type="default" size="large" class="logout-button" @click="logout">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
import { showConfirmDialog } from 'vant'

export default {
  name: 'User',
  data() {
    return {
      userInfo: {
        nickname: '',
        phone: ''
      }
    }
  },
  mounted() {
    this.loadUserInfo()
  },
  methods: {
    // 加载用户信息
    loadUserInfo() {
      const savedUserInfo = localStorage.getItem('user')
      if (savedUserInfo) {
        this.userInfo = JSON.parse(savedUserInfo)
      } else {
        // 如果没有用户信息，跳转到登录页面
        this.$router.push('/login')
      }
    },
    
    // 跳转到订单列表
    goToOrderList() {
      this.$router.push('/order-list')
    },
    
    // 修改密码
    changePassword() {
      this.$router.push('/change-password')
    },
    
    // 退出登录
    logout() {
      showConfirmDialog({
        title: '确认退出',
        message: '您确定要退出登录吗？',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // 清除登录信息
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        
        // 跳转到登录页面
        this.$router.push('/login')
      }).catch(() => {
        // 用户取消退出
      })
    }
  }
}
</script>

<style scoped>
.user-page {
  height: 100vh;
  background-color: #f8f8f8;
}

.user-container {
  width: 100%;
  padding-bottom: 30px;
}

.user-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px 20px;
  color: #fff;
}

.avatar-section {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 5px;
}

.user-info h2 {
  margin: 0 0 5px 0;
  font-size: 20px;
  font-weight: bold;
}

.user-info p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.menu-section {
  padding: 20px;
}

.menu-card {
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.menu-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.view-all {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #999;
}

.order-types {
  display: flex;
  padding: 20px 0;
}

.order-type {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-type span {
  margin-top: 10px;
  font-size: 13px;
  color: #666;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-left span {
  margin-left: 15px;
  font-size: 15px;
  color: #333;
}

.logout-button {
  margin: 0 20px;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 16px;
  border: 1px solid #dcdfe6;
  color: #606266;
}
</style>